<template lang="html">
  <div class="play-list">
    <ul class="play-lists">
      <li v-for="(item, index) in historySongs" :key="index">
        <p @click='playSong(item)'>
          <span class="song-name">{{item.songinfo.title}}</span>
          <span class="author">{{item.songinfo.author}}-{{item.songinfo.album_title}}</span>
          <span class='mv'>MV</span>
          <img class='listen' src="../../../../static/img/history-play-listen.png" alt="">
          <img class='more' src="../../../../static/img/history-playlist-more.png" alt="">
        </p>
      </li>
      <li class='list-delete' @click="removeSongArr" v-if="clearBtn">
        <img src="../../../../static/img/history-play_delete.png" alt="">
        <span>清空记录</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState,mapMutations } from "vuex"

export default {
  name: "PlayList",
  data () {
    return{}
  },
  mounted () {
    console.log(this.historySongs)
    if(this.historySongs.length > 0){
      this.updataClearBtn(true)
    }
  },
  computed: {
    ...mapState(['historySongs','clearBtn'])
  },
  methods: {
    ...mapMutations(['updataCurrentSong','remSongArr','updataClearBtn']),
    playSong (item) {
      this.updataCurrentSong(item)
    },
    removeSongArr () {
      this.remSongArr()
      this.updataClearBtn(false)
    }
  }
}
</script>

<style lang="less" scoped>
.play-list{
  background-color: #fff;

  .play-lists{
    width: 100%;

    li{
      width: 100%;
      height: 100/100rem;
      border-bottom: 1/100rem solid #ccc;

      p{
        height: 100%;
        margin-left: 20/100rem;
        position: relative;
        span{
          display: block;
          width: 100%;
          float:left;
        }

        span.song-name{
          font-size: 25/100rem;
          height: 50%;
          line-height: 60/100rem;

        }
        span.author{
          font-size: 20/100rem;
          color:#666;
          height: 50%;
          line-height: 50/100rem;
        }

        img{
          position:absolute;
        }

        img.listen{
          right:160/100rem;
          top:35/100rem;
          width: 35/100rem;
          height: 35/100rem;
        }

        img.more{
          right:20/100rem;
          top:45/100rem;
          height: 10/100rem;
          width: 35/100rem;
        }
        span.mv{
          position: absolute;
          right:80/100rem;
          top:35/100rem;
          font-size: 20/100rem;
          width: 50/100rem;
          line-height: 30/100rem;
          text-align: center;
          padding: 2/100rem 3/100rem;
          height: 30/100rem;
          border:1/100rem solid #666;
          border-radius: 10/100rem;
        }

      }

    }
    li.list-delete{
      text-align: center;
      border-bottom: none;

      img{
        height: 35/100rem;
        width: 30/100rem;
        float: left;
        margin-top: 30/100rem;
        margin-left: 280/100rem;
      }
      span{
        font-size: 20/100rem;
        line-height: 100/100rem;
        margin-left: 20/100rem;
        color:#666;
        float: left;
      }

    }

  }
}
</style>
